<!--
 * @Author: maqaing
 * @Date: 2021-09-22 09:48:57
 * @LastEditors: maqiang
 * @LastEditTime: 2021-09-24 10:42:58
 * @Description: 
-->
<template>
  <div id="container" style="height: 300px; "></div>
</template>

<script>
import { Violin } from "@antv/g2plot";
export default {
  mounted() {
    fetch(
      "https://gw.alipayobjects.com/os/bmw-prod/6b0a5f1d-5931-42ae-b3ba-3c3cb77d0861.json"
    )
      .then((response) => response.json())
      .then((data) => {
        const violinPlot = new Violin("container", {
          
          data: data,
          xField: "x",
          yField: "y",
          seriesField: "species",
          meta: {
            high: {
              alias: "最大值",
              formatter: (v) => `${v.toFixed(2)} %`,
            },
            low: {
              alias: "最小值",
              formatter: (v) => `${v.toFixed(2)} %`,
            },
            q1: {
              alias: "上四分位数",
              formatter: (v) => `${v.toFixed(2)} %`,
            },
            q3: {
              alias: "下四分位数",
              formatter: (v) => `${v.toFixed(2)} %`,
            },
            species: {
              alias: "品类",
            },
          },
          tooltip: {
            fields: ["species", "high", "q1", "q3", "low"],
          },
        });
        violinPlot.render();
      });
  },
};
</script>

<style lang="sass" scoped>
</style>